<template>
  <div>
    <div class="pagebg"></div>
    <div class="container">
      <!-- 左边的分享内容 -->
      <div class="left-side">

        <div class="search-container">
          <div style="font-weight: bold;
          font-size: 16px;">名称检索：</div>
          <input type="text" v-model="searchQuery" placeholder="搜索..." @input="filterDataList" />
        </div>


        <div class="share">
          <ul>
            <li v-for="item in dataList" :key="item.uid" class="collegeItem">
              <div class="shareli" @click="toShowDetail(item.collegeId)">
                <a href="javascript:void(0);">
                  <i>
                    <img v-if="item.photoList" class="resImg" :src="item.photoList[0]" lazy>
                    <el-image class="resImg" v-else>
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </i>
                  <h2>
                    <b>{{item.summary}}</b>
                  </h2>
                  <span>{{item.collegeName}}</span>
                </a>
              </div>
            </li>
          </ul>
        </div>

        <!-- 分页 -->
        <div class="block" style="text-align: center;">
          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
            layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>

      <div class="sidebar" style="margin-left: 20px;">
        <!-- 右边的排行榜内容 -->
        <RightSide :title="'排行榜'" :dataList="rankingList" @item-click="handleItemClick" />
      </div>

      <div style="clear: both;"></div> <!-- 清除浮动 -->
    </div>
  </div>
</template>

<script>
  import {
    getCollegeList,
    getHotCollegeList,
    addClick
  } from "../api/college.js";
  export default {
    name: "college",
    components: {
      RightSide: () => import("../components/RightRank")
    },
    data() {
      return {
        searchQuery: '',
        dataList: [],
        currentPage: 1,
        pageSize: 16,
        total: 0, // 总数量
        rankingList: [ // 示例排行榜数据
        ]
      };
    },
    created() {
      this.clloegeList();
      getHotCollegeList().then(response => {
        if (response.code === this.$ECode.SUCCESS) {
          this.rankingList.length = 0;
          for (let item of response.data) { // 使用 `of` 代替 `:` 来遍历数组
            let college = { // 使用 `=` 代替 `:` 来定义对象属性
              name: item.collegeName,
              score: item.clickCount,
              cid: item.collegeId
            };
            if (this.rankingList.length < 5)
              this.rankingList.push(college); // 确保对象名一致
          }
        }
      });
    },
    methods: {
      handleItemClick(item) {
        console.log('点击了项:', item);
        let parms = {
          cid: item.cid
        };
        // 处理点击事件
        addClick(parms)
          .then(response => {
            if (response.code === this.$ECode.SUCCESS) {
              console.log('点击成功');
            }
          }).catch(error => {

          });
        // 处理点击事件
        this.toShowDetail(item.cid);
      },
      filterDataList() {
        // console.log(this.searchQuery)
        this.clloegeList(this.searchQuery)
      },
      clloegeList(search) {
        var params = {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          keyword: search,
        };
        console.log(params.collegeName)
        getCollegeList(params).then(response => {
          console.log("得到的结果", response);
          if (response.code == this.$ECode.SUCCESS) {
            this.dataList = response.data.records;
            this.total = response.data.total;
            this.pageSize = response.data.size;
            this.currentPage = response.data.current;
          }
        });
      },
      handleCurrentChange(val) {
        this.currentPage = val; // 改变当前所指向的页数
        this.clloegeList();
      },
      toShowDetail(selectCollegeUid) {
        this.$router.push({
          path: "/college/message",
          query: {
            collegeUid: selectCollegeUid
          }
        });
      }
    }
  };
</script>

<style scoped>
  .left-side {
    /* margin-left: -36px; */
    width: 950px;
    float: left;
    background-color: white;
    border-radius: 10px;
    padding-bottom: 10px;
    /* 圆角半径 */
  }

  .search-container {
    display: flex;
    padding: 15px 40px;
    /* 上下10px，左右20px */
    align-items: center;
    justify-content: left;
  }

  .search-container input {
    width: 150px;
    padding: 10px;
    /* 内边距 */
    border: 1px solid #ccc;
    /* 边框颜色 */
    border-radius: 5px;
    /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 阴影 */
    font-size: 16px;
    /* 字体大小 */
    outline: none;
    /* 去除默认的聚焦边框 */
    transition: width 0.3s, border-color 0.3s, box-shadow 0.3s;
    /* 平滑过渡 */
  }

  .search-container input:hover,
  .search-container input:focus {
    width: 250px;
    /* 悬停和聚焦时宽度 */
    border-color: #1679ff;
    /* 聚焦时边框颜色 */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
    /* 聚焦时阴影 */
  }

  .share {
    display: flex;
    flex-direction: column;
    /* 垂直方向排列子元素 */
    align-items: center;
    /* 水平方向居中对齐子元素 */
    padding: 30px 20px;
    min-height: 800px;
  }

  .resImg {
    width: 75%;
    height: 160px;
    vertical-align: middle;
  }

  .el-drawer {
    min-width: 400px;
  }

  .share ul {
    float: left;
    list-style-type: none;
    /* 去掉默认的列表样式 */
    padding: 0;
    /* 去掉内边距 */
    margin: 0;
    /* 去掉外边距 */
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素换行 */
    justify-content: center;
    /* 水平方向居中对齐子元素 */
  }

  .collegeItem {
    text-align: center;
    width: 250px;
  }

  .container {
    display: flex;
    justify-content: space-between;
  }
</style>
